import React, { memo, Component } from 'react'
import { getConfessionList } from '@/api'
import ConfessionCard from '../components/confessionCard'

class ConfessionCards extends Component {
  constructor(props) {
    super(props)
    this.state = {
      confessions: [],
      pageNum: 1, //页码
      pageSize: 20, //条数
    }
  }

  componentDidMount(){
    this.queryConfessionList()
  }
  queryConfessionList = () =>{
    const {pageSize,pageNum} = this.state
    getConfessionList({pageSize,pageNum}).then(res=>{
      this.setState({
        confessions:res.data.list
      })
    })
  }
  onPageScroll = (e) =>{
    console.log(e.target.scrollTop,e.target.clientHeight,e.target.scrollHeight)
  }
  render() {
    const { confessions } = this.state
    return (
      <div className="scrollArea"  onScroll={e=>this.onPageScroll(e)}>
      <div className="centerBox">
        {confessions?.map((item, index) => {
          return <ConfessionCard data={item} key={index} history={this.props.history}></ConfessionCard>
        })}
      </div>
      </div>
    )
  }
}

export default memo(ConfessionCards)